<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button class="A">xx</button>
        <button class="B">yy</button>
    </div>
    <div>
        <div class="a">aa</div>
        <div class="b">bb</div>
    </div>
    <style>
        .a{
            width: 80px;
            height: 80px;
            background-color: aquamarine;
        }
        .b{
            width: 80px;
            height: 80px;
            background-color: purple;
            transition: all 1s linear;
        }
    </style>

    <!-- 遵循：查找目标，更改/获取目标属性，绑定事件触发三步走。 -->
    <script>
        let a = document.querySelector(".A");
        let b = document.querySelector(".B");
        let pool = ["red", "blue", "green", "yellow"];
        // pool.addEventListener
        a.addEventListener("click", () => {
            // [0,255]  ->[0,256)
            let s = Math.floor(Math.random() * 256)
            let o = Math.floor(Math.random() * 256)
            let p = Math.floor(Math.random() * 256)
            b.style.backgroundColor = `rgb(${s}, ${o}, ${p})`;
        });
        b.addEventListener("click", function () {
            let i = Math.floor(Math.random() * pool.length)
            // [0,4)
            a.style.color = pool[i];
        })

    </script>
</body>



</html>